<template>
  <div class="api-docs-page">
    <el-card>
      <template #header>
        <div class="card-header">
          <h2>图片批量入库 API 文档</h2>
        </div>
      </template>

      <el-tabs v-model="activeTab" type="border-card" @tab-change="handleTabChange">
        <el-tab-pane label="快速开始" name="quickstart">
          <div class="markdown-content" v-loading="loading" v-html="markdownContent"></div>
        </el-tab-pane>

        <el-tab-pane label="API 文档" name="api">
          <div class="markdown-content" v-loading="loading" v-html="markdownContent"></div>
        </el-tab-pane>
      </el-tabs>
    </el-card>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import { marked } from 'marked'
import DOMPurify from 'dompurify'

const activeTab = ref('quickstart')
const loading = ref(false)
const markdownContent = ref('')

// 文档文件映射
const docFiles = {
  quickstart: '/docs/QUICK_START.md',
  api: '/docs/IMAGE_UPLOAD_API.md'
}

// 加载 markdown 文件
async function loadMarkdown(file) {
  loading.value = true
  try {
    const response = await fetch(file)
    if (!response.ok) {
      throw new Error(`Failed to load ${file}`)
    }
    const text = await response.text()
    
    // 使用 marked 转换为 HTML
    const html = marked(text, {
      breaks: true,
      gfm: true
    })
    
    // 使用 DOMPurify 清理 HTML，防止 XSS
    markdownContent.value = DOMPurify.sanitize(html)
  } catch (error) {
    console.error('加载文档失败:', error)
    markdownContent.value = `<div class="error-message">加载文档失败，请刷新页面重试。</div>`
  } finally {
    loading.value = false
  }
}

// 切换标签页时加载对应的文档
function handleTabChange(name) {
  const file = docFiles[name]
  if (file) {
    loadMarkdown(file)
  }
}

// 初始化加载第一个文档
onMounted(() => {
  loadMarkdown(docFiles[activeTab.value])
})
</script>

<style scoped>
.api-docs-page {
  height: 100%;
}

.card-header h2 {
  margin: 0;
  color: #303133;
}

.markdown-content {
  padding: 20px;
  min-height: 400px;
  line-height: 1.8;
  color: #303133;
}

.markdown-content :deep(h1) {
  margin-top: 0;
  margin-bottom: 20px;
  padding-bottom: 10px;
  border-bottom: 2px solid #409eff;
  color: #303133;
  font-size: 28px;
}

.markdown-content :deep(h2) {
  margin-top: 30px;
  margin-bottom: 15px;
  padding-bottom: 8px;
  border-bottom: 1px solid #e4e7ed;
  color: #303133;
  font-size: 24px;
}

.markdown-content :deep(h3) {
  margin-top: 25px;
  margin-bottom: 12px;
  color: #606266;
  font-size: 20px;
}

.markdown-content :deep(h4) {
  margin-top: 20px;
  margin-bottom: 10px;
  color: #606266;
  font-size: 16px;
}

.markdown-content :deep(p) {
  margin: 10px 0;
}

.markdown-content :deep(ul),
.markdown-content :deep(ol) {
  margin: 10px 0;
  padding-left: 30px;
}

.markdown-content :deep(li) {
  margin: 5px 0;
}

.markdown-content :deep(code) {
  background-color: #f5f7fa;
  padding: 2px 6px;
  border-radius: 3px;
  font-family: 'Courier New', 'Consolas', 'Monaco', monospace;
  color: #e6a23c;
  font-size: 14px;
}

.markdown-content :deep(pre) {
  background-color: #282c34;
  color: #abb2bf;
  padding: 16px;
  border-radius: 4px;
  overflow-x: auto;
  margin: 15px 0;
  font-family: 'Courier New', 'Consolas', 'Monaco', monospace;
  font-size: 14px;
  line-height: 1.6;
}

.markdown-content :deep(pre code) {
  background-color: transparent;
  color: #abb2bf;
  padding: 0;
}

.markdown-content :deep(table) {
  width: 100%;
  border-collapse: collapse;
  margin: 15px 0;
}

.markdown-content :deep(table th),
.markdown-content :deep(table td) {
  border: 1px solid #e4e7ed;
  padding: 8px 12px;
  text-align: left;
}

.markdown-content :deep(table th) {
  background-color: #f5f7fa;
  font-weight: 600;
}

.markdown-content :deep(table tr:nth-child(even)) {
  background-color: #fafafa;
}

.markdown-content :deep(blockquote) {
  border-left: 4px solid #409eff;
  padding-left: 16px;
  margin: 15px 0;
  color: #606266;
  background-color: #f0f9ff;
  padding: 10px 16px;
}

.markdown-content :deep(a) {
  color: #409eff;
  text-decoration: none;
}

.markdown-content :deep(a:hover) {
  text-decoration: underline;
}

.markdown-content :deep(hr) {
  border: none;
  border-top: 1px solid #e4e7ed;
  margin: 20px 0;
}

.error-message {
  padding: 20px;
  background-color: #fef0f0;
  color: #f56c6c;
  border-radius: 4px;
  text-align: center;
}
</style>
